<template>
<div class="user_content">
      <el-form
        :model="user"
        ref="user"
        label-width="100px" class="demo-ruleForm">

        <el-form-item label="id" prop="id">
          <el-input type="text" v-model="user.id"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="name">
          <el-input type="text" v-model="user.name"></el-input>
        </el-form-item>

        <el-form-item label="年龄" prop="age">
          <el-input type="text" v-model="user.age"></el-input>
        </el-form-item>
        
        <el-form-item label="邮箱" prop="age">
          <el-input type="text" v-model="user.email"></el-input>
        </el-form-item>

        <el-form-item label="试卷照片" prop="pagePicture">
      <!-- <el-input v-model="answerPage.pagePicture" placeholder=""></el-input> -->
      <single-upload v-model="user.pagePicture" style="float: left; margin-left: 10px"></single-upload>

     <single-upload
            v-model="user.picture"
            style="float: left; margin-left: 10px"
          ></single-upload>

    </el-form-item>

        <el-form-item>
          <el-button @click="addUser(user)" type="primary">添加</el-button>
        </el-form-item>

        
      </el-form>
    
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js,第三方插件js,json文件，图片文件等等）
//例如： import <<组件名称>> from '<<组件路径>>' ;

//例如： import <<组件名称>> from '<<组件路径>>' ; 
import singleUpload from '@/components/upload/singleUpload'
export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {singleUpload},
  props: {},
  data() {
    //这里存放数据
    return {
      user: {
        id: "",
        name: "",
        age: "",
        email: "",
         pagePicture:''
      },
     
               
                
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data 中的数据变化
  watch: {},
  //方法集合
  methods: {
     handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
    addUser(user) {
      console.log(user.pagePicture);
      // 发送ajax
      // this.axios({
      //   method: "put",
      //   url: "http://localhost:9000/user/addUser",
      //   data: {
      //     id: user.id,
      //     name: user.name,
      //     age: user.age,
      //     email: user.email,
      //     pagePicture: user.pagePicture

      //   }
      // })
      //   .then(response => {
      //     console.log(response.data.data);

      //     if (response.data.data != true && response.data.code != 200) {
      //       alert("添加失败");
      //       // 跳转到错误页面
      //       this.$router.push("/fal");
      //     } else {
      //       alert("添加成功");
      //     }
      //   })
      //   .catch(res => {
      //     // 跳转到错误页面
      //     this.$router.push("/fal");
      //   });
        let data =  {
          id: user.id,
          name: user.name,
          age: user.age,
          email: user.email,
          pagePicture: user.pagePicture

        }

        this.$http.put("user/addUser",data,(response)=>{
           console.log(response.data.data);

          if (response.data.data != true && response.data.code != 200) {
            alert("添加失败");
            // 跳转到错误页面
            this.$router.push("/fal");
          } else {
            this.$message({
               message: response.data.msg,
                  type: 'success'
            });
          }
        })
      // 跳转到列表页面
      this.$router.push("/Home");
    }
  },
  //生命周期 -创建完成 （可以访问当前this 实例）
  created() {},
  //生命周期-挂载完成（可以访问DOM 元素）
  mounted() {},
  beforeCreate() {}, //生命周期 -创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 -更新之后
  beforeDestroy() {}, //声明周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive 缓存功能 这个函数会触发
};
</script>
<style scoped>
/*@import url();引入公共css类*/
</style>